<template>
  <div class="template">
    <div class="main" :style="mainImg">
        <router-link :to="{path:'/make/jiandang'}">制作贺卡（建党）</router-link>
        <router-link :to="{path:'/make/jianjun'}">制作贺卡（建军）</router-link>
        <router-link :to="{path:'/make/jiaoshi'}">制作贺卡（教师）</router-link>
        <router-link :to="{path:'/make/guoqin'}">制作贺卡（国庆）</router-link>
        <router-link :to="{path:'/make/zhongqiu'}">制作贺卡（中秋）</router-link>
        <router-link :to="{path:'/make/ganen'}">制作贺卡（感恩）</router-link>
        <router-link :to="{path:'/make/yuandan'}">制作贺卡（元旦）</router-link>
        <router-link :to="{path:'/make/fuqin'}">制作贺卡（父亲）</router-link>
        <router-link :to="{path:'/make/duanwu'}">制作贺卡（端午）</router-link>
        <router-link :to="{path:'/make/ertong'}">制作贺卡（儿童）</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      mainImg: {
        backgroundImage: 'url(' + require('../../assets/logo.png') + ')', // eslint-disable-line
        backgroundRepeat: 'no-repeat'
      }
    }
  },
  created () {
    // this.mainImg.backgroundImage = '../../assets/logo.png'
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .main{
    width: 100vw;
    height: 100vh
  }
</style>
